<template>
  <view class="member-list">
    <view class="filter-result">
      <UniDataCheckbox
        multiple
        :localdata="localData"
        @change="handleChangeIsMember"
      ></UniDataCheckbox>
      <text>筛选结果：{{ total }} 个</text>
    </view>
    <Paglist v-model="dataList" :parame="parame" @register="register">
      <template v-for="v in dataList" :key="v.memberId">
        <Item :item="v" @openSetPopup="emit('openSetPopup', v)" />
      </template>
    </Paglist>
  </view>
</template>

<script setup lang="ts">
  import { getCurrentInstance, provide, reactive, ref, watch } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { memberManageList } from '@/api/admin';
  import type { IMemberManageListResData, IMemberManageListData } from '@/api/admin/types';

  import { propTypes } from '@/utils/propTypes';
  import { isFunction } from '@/utils/is';
  import Item from './Item.vue';
  import UniDataCheckbox from '@/components/Form/uni_modules/uni-data-checkbox/uni-data-checkbox.vue';

  const total = ref(0);
  const dataList = ref<IMemberManageListResData[]>([]);
  provide('api', (obj: any) => {
    return memberManageList(obj).then((r) => {
      total.value = r.total;
      return r;
    });
  });

  const props = defineProps({
    keyword: propTypes.string.def(''),
    filterParams: propTypes.object.def({}),
  });

  const emit = defineEmits(['openSetPopup']);

  const localData = ref([
    {
      text: '筛选我服务的会员',
      value: 1,
    },
  ]);

  const parame = reactive<IMemberManageListData>({
    current: 1,
    size: 10,
    keyword: undefined,
    applyType: undefined,
    levelId: undefined,
    memberState: [1],
    paymentStatus: undefined,
    industryId: undefined,
    server: undefined,
    groups: undefined,
    beginDataIntegrity: undefined,
    endDataIntegrity: undefined,
    show: undefined,
    member: false,
  });
  const [register, { refresh }] = useConList();

  function rest() {
    for (const k in parame) {
      if (k === 'current' || k === 'size' || k === 'keyword' || k === 'member') continue;
      (parame as any)[k] = undefined;
    }
  }

  const handleChangeIsMember = (e: { detail: { value: number[] } }) => {
    parame.member = e.detail.value.length > 0;
    refresh?.();
  };

  // watch(
  //   () => member.value,
  //   (val: any) => {
  //     console.log(1)
  //     parame.member = val.length > 0 ? true : false;
  //     isFunction(refresh) && refresh();
  //   },
  // );

  watch(
    () => props.keyword,
    (val) => {
      parame.keyword = val;
      isFunction(refresh) && refresh();
    },
  );

  watch(
    () => props.filterParams,
    (val) => {
      let keys = Object.keys(val);
      rest();
      if (keys.length > 0) {
        keys.forEach((k) => parame.hasOwnProperty(k) && ((parame as any)[k] = val[k]));
      }

      isFunction(refresh) && refresh();
    },
  );
</script>

<style lang="scss" scoped>
  .filter-result {
    font-size: 24rpx;
    color: #aaabab;
    font-weight: 400;
    height: 73rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    background: #fff;

    ::v-deep {
      .checklist-text {
        font-size: 24rpx;
      }
    }
  }

  .member {
    &-item {
      height: min-content;
      background-color: #fff;
      margin-bottom: 4rpx;
      display: flex;
      align-items: center;
      padding: 25rpx 30rpx;
    }

    &-name {
      margin-left: 40rpx;
      font-size: 32rpx;
      color: #333;
      font-weight: bolder;
    }
  }
</style>
